{{ template "header" . }}

{{ if not .Golfer }}
    <div class=info>
        {{ svg "info-circle" }}
        <p>
            Code Golf is a game designed to let you show off your code-fu by
            solving problems in the least number of characters.
        <p>
            Since this is your first time here, we suggest starting with
            something simple like the <a href=tutorial>Tutorial hole</a>.
        <p>
            Also visit <a href=//discord.gg/eVCTkYQ>our Discord server</a>
            for some advice.
    </div>
{{ end }}

<main id=home>
{{ if .Golfer }}
    <nav class=span>
        <button class="btn blue" data-dialog=settings-dialog title=Settings>
            {{ svg "gear-fill" }}
            Page Settings
        </button>
    </nav>
{{ end }}
{{ range .Data }}
    <a class="card {{ .Hole.CategoryColor }}"
    {{ if $.Golfer }}
        {{ $lang    := index $.Golfer.Settings "home" "points-for" }}
        {{ $scoring := index $.Golfer.Settings "home" "scoring"    }}
        {{ if eq (index $.Golfer.Settings "home" "navigate-to") "rankings" }}
            href="rankings/holes/{{ .Hole.ID }}/{{ $lang }}/{{ $scoring }}"
        {{ else }}
            href='{{ .Hole.ID }}{{ if ne $lang "all" }}#{{ $lang }}{{ end }}'
        {{ end }}
    {{ else }}
        href="{{ .Hole.ID }}"
    {{ end }}
       title="{{ .Hole.Name }} ({{ .Hole.Category }})">
        <h2>{{ .Hole.Name }}</h2>
        {{ svg .Hole.CategoryIcon }}
    {{ if .Lang }}
        <span title="{{ comma .Points }} points in {{ .Lang.Name }}">
            {{ comma .Points }}
            {{ svg .Lang.ID }}
        </span>
    {{ end }}
    </a>
{{ end }}
</main>

{{ template "settings-dialog" . }}
{{ template "footer" }}
